<template>
<div class="atop1">
 <el-row>
  <el-col :span="18">
    <div class="grid-content bg-purple">
      <div class="conta-er">
<el-tabs type="border-card">
  <el-tab-pane label="接受到的文件" >
    <div  v-for="item in LeaderFiles" :key="item.id" class="v2">
      <div class="file">
        <span class="introduction">文件介绍:&nbsp;&nbsp;{{item.introduction}}</span>
        <a :href="item.upload_file">点击下载</a>
      <!-- {{item.upload_file}} -->
      </div>
    </div>
  </el-tab-pane>
  <el-tab-pane label="发送文件"  >
    <el-tabs  tab-position="left">
    <el-tab-pane  :label="item.affairs_name"  v-for="item in affairsList" :key="item.id" >
        <JoinSendFile :Refdata="item"></JoinSendFile>
    </el-tab-pane>

  </el-tabs>

  </el-tab-pane>
</el-tabs>
<div class="bootom">
  <el-row type="flex" class="row-bg" justify="center">
         <el-col :span="6"><div class="grid-content bg-purple">
      <el-button type="success" round @click="goOff" >返回</el-button>
    </div></el-col>
</el-row>
</div>
</div>
    </div>
  </el-col>
  <el-col :span="5">
    <div class="grid-content bg-purple-light">
      <div class="legt-con">

        <div class="ton1">
        <div > <span class="qunid">群id:</span>  <span class="fonsz">{{id}}</span></div>
        <!-- <span></span> -->
        <div ><span class="qunleader">组长：</span>  <span class="fonsz">{{leader}}</span></div>
        </div>
        <div class="ton2">当前组员：</div>
<div  v-for="item in groupData" :key="item.id" class="imgName">
    <img :src="item.avatar" class="imgAvator" />
    <span style="margin-left:5px;" class="nameText">{{item.username}}({{item.alias}})</span>
    </div>

    </div>
    </div>
    </el-col>
</el-row>

</div>
</template>

<script>
import JoinSendFile from './JoinSend.vue'
import { getGroupLeader, getInfo } from '@/api/newGroup'
import { getAffairsList, getLeaderFiles } from '@/api/affairs'
export default {
  props: ['id'],
  data () {
    return {
      groupData: '',
      leader: '',
      // dialogVisible: false,
      formWork: {
        affairsName: ''
      },
      LeaderFiles: '',
      affairsList: '',
      affairs_name: '21444',
      affid: ''
    }
  },
  methods: {
    fetchTodayTip () {
      getInfo(this.id).then(response => {
        const { data } = response
        this.groupData = data
        console.log(this.groupData)
      })
      getGroupLeader(this.id).then(response => {
        const { data } = response
        this.leader = data.groupLeader
      })
      getAffairsList(this.id).then(response => {
        const { data } = response
        this.affairsList = data
        console.log(this.affairsList)
        // this.fetchTodayTip()
      })
      getLeaderFiles(this.id).then(response => {
        const { data } = response
        this.LeaderFiles = data
        console.log(this.LeaderFiles)
      })
    },
    // GetAffairsMenu(){}
    goOff () {
      this.$router.go(-1)
    }
  },
  created () {
    this.fetchTodayTip()
    // this.GetAffairsMenu()
    this.formWork.groupId = this.id
  },
  components: {
    JoinSendFile
  },
  mounted () {
  }
}
</script>

<style lang="less" scoped>
.qunid ,.qunleader{
  display: inline-block;
  width: 60px;
  height: 30px;
  border-radius: 30px;
  line-height: 30px;
  // justify-content: center;
  // align-items: center;
  // margin: 0 auto;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.329);
  margin-bottom: 4px;
  font-weight: 550;
  font-family: Sans-serif;
  color: #fff;
}

.fonsz{
  font-weight: 550;
  color: #fff;
  text-decoration: underline;
}

.atop1{
 margin: 15px;
  background-color: rgb(0, 0, 0);
   opacity: 0.9;
  width: 100%;
  height: calc(100% - 15px);
  color: rgb(255, 255, 255);
}
.conta-er{
  height: 63vh;
}
.legt-con{
  margin-left: 15px;
   background-color: rgb(165, 174, 179);
  height: 75vh;
  color: black;
   overflow:auto;
}
.el-tabs{
  height: 100%;
  overflow:auto;
  position: relative;
  // background-color: white;
}
.el-tab-pane{
  // width: 50%;
  color: black;
}
.bootom{
  margin-top: 20px;
  height: 60px;
  background-color: #fff;
  align-items: center;
  line-height: 60px;
  justify-content: center;
}
.el-card{
  background-color: #fff;
  border: none;
  margin-left: 10px;
  .box-card {
.el-card__body {
    padding: 0px;
}
// .el-tabs__item {
//   width: 5.333333rem !important;
// }
  }
}
.ton1{
 padding-top: 5px;
 padding-left: 10px;
 background-color: rgb(165, 174, 179);
  // border-bottom: 2px solid #000;
}
.ton2{
  height: 30px;
  background-color: rgb(205, 231, 221);
  line-height: 30px;
  text-align: center;
}
.demo-type{
  display: flex;
  align-items: center;
  margin: 8px;
}
// .nameText{
//   overflow: hidden;
// }
.file{
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  background-color: rgb(80, 102, 201);
  border-radius: 40px;
  a{
    color: red;
  }

}
  .file:hover{
    background-color: rgb(32, 221, 196);
  }
.v2{
  // display: inline-block;
  margin: .533333rem;
}
.introduction{
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 16px;
  margin-right: 10px;
}
.imgName{
   white-space:nowrap;
   overflow: hidden;
   text-overflow:ellipsis;
   padding: 10px;
   padding-bottom: 3px;
}
.imgAvator{
  width: 30px;
  height: 30px;
  border-radius: 30px;
}
</style>
